<template>
<f7-page name="detail" class="page-detail">
  <f7-navbar>
    <f7-nav-left :back-link="true">
      <f7-link icon-f7="add"></f7-link>
      <f7-link icon-f7="heart"></f7-link>
      <f7-link icon-f7="more_round"></f7-link>
      <f7-link icon-f7="share"></f7-link>
    </f7-nav-left>
  </f7-navbar>
  <!--商品{{$route.params.id}}-->
  <!--http://docs.framework7.cn/Index/swiper.html-->
  <!-- http://idangero.us/swiper/api/#.WQbi-lOGOHo-->
  <f7-swiper pagination>
    <f7-swiper-slide>商品{{$route.params.id}}</f7-swiper-slide>
    <f7-swiper-slide>Slide 2</f7-swiper-slide>
    <f7-swiper-slide>Slide 3</f7-swiper-slide>
    <f7-swiper-slide>Slide 4</f7-swiper-slide>
    <f7-swiper-slide>Slide 5</f7-swiper-slide>
  </f7-swiper>

  <!--http://docs.framework7.cn/Index/tabs.html-->
<!-- Switch Between Tabs -->
  <f7-buttons>
    <f7-button tab-link="#tab-1" active>Button 1</f7-button>
    <f7-button tab-link="#tab-2">Button 2</f7-button>
    <f7-button tab-link="#tab-3">Button 2</f7-button>
  </f7-buttons>
   <!-- Tabs -->
  <f7-tabs>
    <f7-tab id="tab-1" active>Tab 1</f7-tab>
    <f7-tab id="tab-2">Tab 2</f7-tab>
    <f7-tab id="tab-3">Tab 3</f7-tab>
  </f7-tabs>

  
</f7-page>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      detailInfo: []
    }
  },
  created() {
    // this.$$.getJSON('/api/gdetail', 
    // {id: this.$route.params.id }, 
    // data => {
    //   console.log(data)
    //   this.detailInfo = data
    // })

    // console.log(this.$route.params.id)
  },
  methods: {
   
  }
}
</script>

<style lang="scss">
.page-detail {
  .swiper-container {
    height: 160px;
  }
  .swiper-slide {
    background:#fff;
  }
  .swiper-slide span {
    text-align:center;
    display:block;
    margin:20px;
    font-size:21px;
  }

  .buttons-row {
    margin-top: 20px;
  }


}
</style>
